<template>
  <div class="research-component">
    <div class="research">
      <!-- <div v-if="pageConfig.researchConfig.superSearch" style="height: 32px">
        <byakugan :pageConfig="pageConfig" ref="superSearch"></byakugan>
        <div>
          <template v-for="(btn, index) in pageConfig.researchConfig.btn_group">
            <button :key='index' type="button" class="btn btn-sm"
                  @click="goToAction(btn.btn_func, pageConfig.researchConfig.filters)" :class="btn.class">
            <i :class="btn.btn_icon" ></i>
            {{btn.btn_name}}
          </button>
          </template>

        </div>
      </div> -->
      <form style="font-size:0;line-height:32px;">
        <template v-for="(input_condition, index_input_condition) in pageConfig.researchConfig.input_conditions">
          <div :key="index_input_condition" class="research-div">
            <input
              v-if="input_condition.type === 'input'"
              v-model.trim="pageConfig.researchConfig.filters[input_condition.value]"
              @keyup.enter="goToAction('search', pageConfig.researchConfig.filters)"
              :placeholder="$t(input_condition.placeholder)"
              type="text"
              class="form-control research-input c-dark"
              @mouseover="activeInput(input_condition, index_input_condition)"
            />
            <i
              class="fa fa-plus-circle clearIcon"
              style="font-size:12px;"
              v-if="showClearIcon(input_condition, index_input_condition)"
              @click="clearInputCondition(input_condition)"
            ></i>
          </div>
        </template>
        <div class="research-div" style="font-size:12px;">
          <slot name="transmitExtraSearch"></slot>
        </div>
        <div class="button-div" style="font-size:12px;">
          <template v-for="(btn, index) in pageConfig.researchConfig.btn_group">
            <button
              :key="index"
              type="button"
              class="btn btn-sm"
              @click="goToAction(btn.btn_func, pageConfig.researchConfig.filters)"
              :class="btn.class"
            >
              <i :class="btn.btn_icon"></i>
              {{ $t(btn.btn_name) }}
            </button>
          </template>
          <div class="research-div" style="font-size:12px;">
            <slot name="transmitExtraBtn"></slot>
          </div>
        </div>
      </form>
      <!-- <div class="batch-operation" v-if="pageConfig.researchConfig.batch_btn_group"  @mouseleave="showBtnGroup=false">
        <div class="btn-group" role="group">
          <button type="button"  class="btn btn-sm btn-patch dropdown-toggle" @mouseover="showBtnGroup=!showBtnGroup" :disabled="isBatchBtnsActive">
            批量操作
          </button>
          <ul class="dropdown-btn" v-if="showBtnGroup">
            <template v-for="(btn, btnIndex) in pageConfig.researchConfig.batch_btn_group">
              <li class="filters-li" :key="btnIndex" @click="goToAction(btn.btn_func, btn.type)">{{btn.btn_name}}</li>
            </template>
          </ul>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
// import byakugan from '../../components/common-temp/byakugan'

export default {
  name: 'research-component',
  data () {
    return {
      showBtnGroup: false,
      isBatchBtnsActive: true, //
      activeClearIcon: null, // 搜索区域当前关键字值
      activeClearIconNo: null // 搜索区域序号(只包含简单搜索)
    }
  },
  props: ['pageConfig', 'selectedData'],
  watch: {
    selectedData: function (selectedData) {
      this.isBatchBtnsActive = !(selectedData.checkedIds.length > 0)
    }
  },
  mounted () {},
  methods: {
    // 定位当前搜索框信息
    activeInput (input_condition, index_input_condition) {
      this.activeClearIcon = input_condition.value
      this.activeClearIconNo = index_input_condition
    },
    // 注销当前搜索框信息
    cancelActiveInput () {
      this.activeClearIcon = null
      this.activeClearIconNo = null
    },
    // 判断是否显示搜索框清除按钮
    showClearIcon (input_condition, index_input_condition) {
      let isInputEmpty = !this.$root.$validate.isEmpty_reset(
        this.pageConfig.researchConfig.filters[input_condition.value]
      )
      return !!(index_input_condition === this.activeClearIconNo && isInputEmpty)
    },
    // 搜索框清除按钮响应函数
    clearInputCondition (input_condition) {
      this.pageConfig.researchConfig.filters[input_condition.value] = ''
      this.cancelActiveInput()
      this.$parent.search()
    },
    goToAction (func, filters) {
      if (func === 'search') {
        if (this.pageConfig.researchConfig.superSearch) {
          this.$refs.superSearch.search()
        } else {
          this.$parent[func](filters)
        }
      } else {
        this.$parent.$parent[func](filters)
      }
    }
  },
  components: {
    // byakugan
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/css/common.less';
/*搜索组件整体样式*/
.research {
  margin: 8px 0px;
  padding: 0px;
  text-align: left;
  padding-right: 150px;
  button {
    margin-bottom: 3px;
  }
}
/*控制每个搜索框样式*/
.research-div {
  /*width: auto;*/
  // margin-bottom: 10px;
  display: inline-block;
  vertical-align: top;
}

.form-control {
  // 解决IE11 输入框无法与按钮同行问题
  display: inline-block;
  padding: 4px 18px 4px 7px;
}
/*取消选中样式*/
.form-control:focus {
  box-shadow: none;
}

/*input框样式*/
.research-input {
  width: 160px;
  height: 32px;
  font-size: 12px;
  margin-left: 8px;
  margin-right: 8px;
}
/*输入框清除按钮样式*/
.clearIcon {
  position: relative;
  right: 28px;
  transform: rotate(45deg);
}

button {
  margin-left: 8px;
  margin-right: 8px;
}
button:focus {
  box-shadow: none;
}
.batch-operation {
  float: right;
  // margin-right: 100px;
  margin-top: -32px;
  .btn-group {
    margin-right: 5px;
    .btn-patch {
      background: @color-blue;
      border-radius: 4px;
      color: #ffffff;
      width: 109px;
    }
  }
}
.dropdown-btn {
  background: #ffffff;
  border: 1px solid @color-gray-E;
  border-radius: 4px;
  width: 109px;

  cursor: pointer;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  list-style: none;
}
.btn {
  // width: 86px;
  height: 32px;
}

.filters-li {
  padding: 0 16px;
  line-height: 28px;
  text-align: left;
  cursor: pointer;
  color: #595959;
}

.filters-li:hover {
  background-color: @color-gray-F;
}
.button-div {
  display: inline-block;
}
// @media screen and (max-width: 1400px) {
//   .button-div{
//     display: block;
//     margin-top: 8px;
//     height: 32px;
//   }
// }
</style>
